<template>
  <view class="page">
    <nav-bar title="编辑资料" />
    <view class="container">
      <div class="profile_photo ">
        <upload-cropper :showDelBtn="false" :maxCount="1" radius :uploadW="152" :radio="[1, 1]"
          v-model:url="form.headOssUrl">
          <template #defaultTxt>
            <image class="upload_icon" mode="widthFix" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/company_default_upload.png"></image>
          </template>
        </upload-cropper>
      </div>
      <view class="list_box pb-38 mb-15">
        <view class="list_item  flex_a_c">
          <view class="list_txt">
            <font class="require">*</font>企业名称
          </view>
          <input class="flex1 tr" :disabled="Boolean(form.id)" v-model="form.entName" placeholder-class='inputPlaceHolder' placeholder="请输入(必填)" />
        </view>
        <view class="list_item flex_r">
          <view class="list_txt">
            <font class="require">*</font>企业类型
          </view>
          <picker-multiple-select class="flex1" v-model="form.occupationIds" :list="dicList.occupationIdsList" />
        </view>
        <view class="list_item  flex_a_c">
          <view class="list_txt">
            <font class="require">*</font>企业地区
          </view>
          <regionPicker :range="dicList.cityList" @on-change="arr => ([form.province, form.city, form.area] = arr)"
            :editIdArr="[form.province, form.city, form.area]" class="flex1" />
        </view>
        <view class="list_item  flex_a_c">
          <view class="list_txt">
            <font class="require">*</font>详细地址
          </view>
          <input class="flex1 tr" v-model="form.address" placeholder-class='inputPlaceHolder' placeholder="请输入详细地址" />
        </view>
        <view class="list_item flex_r">
          <view class="list_txt">
            <font class="require">*</font>业务需求
          </view>
          <picker-multiple-select class="flex1" v-model="form.interestLabel" :list="dicList.interestLabelList" />
        </view>
        <view class="list_item pr border_none">
          <view class="list_txt">
            <font class="require">*</font>企业简介
          </view>
          <textarea class="flex1 remarks_textarea" v-model="form.remark" maxlength="300"
            placeholder-class='inputPlaceHolder' placeholder="请输入企业简介" />
        </view>
      </view>
      <view class="list_box pb-20  mb-15">
        <view class="list_item  flex_a_c">
          <view class="list_txt">
            <font class="require">*</font>姓名
          </view>
          <input class="flex1 tr" v-model="form.staffName" placeholder-class='inputPlaceHolder' placeholder="请输入您的真实姓名" />
        </view>
        <view class="list_item  flex_a_c">
          <view class="list_txt">
            <font class="require">*</font>职务
          </view>
          <input class="flex1 tr" v-model="form.staffPost" placeholder-class='inputPlaceHolder' placeholder="真实的职务，获得更多的商务合作" />
        </view>
        <view class="list_item  flex_a_c">
          <view class="list_txt">
            <font class="require">*</font>邮箱
          </view>
          <input class="flex1 tr" v-model="form.staffEmail" placeholder-class='inputPlaceHolder' placeholder="请输入您的企业邮箱" />
        </view>
        <view class="list_item border_none">
          <view class="list_txt">
            <font class="require">*</font>请选择<font class="require">(1种)</font>认证方式
          </view>
          <view class="flex_b_c mb-42">
            <view :class="['list_tag w_214 ml-0', form.authType === item.id && 'on']" @click="!form.id && (form.authType = item.id)"
              v-for="item in dicList.authType" :key="item.id">
              {{ item.dicName }}
            </view>
          </view>
          <image v-if="form.id" class="w_180 h_180" :src="form.authImgUrl"></image>
          <upload v-else :previewSize="180" :directory="'personInfo'" :maxCount="1" v-model:url="form.authImgUrl" />
        </view>
      </view>
      <view class="list_box pb-20">
        <view class="list_item border_none">
          <view class="list_txt lh-90" style="color: #999999">
            继续完善更多信息（非必填）
          </view>
        </view>
        <view class="list_item border_none">
          <view class="list_txt lh-98">
            企业代表作/活动
          </view>
          <textarea class="flex1 remarks_textarea" v-model="form.reprWorks" maxlength="300"
            placeholder-class='inputPlaceHolder' placeholder="请输入代表作品/ 活动  例：《钢铁是怎样炼成的》、《我和我的祖国》 、《东方新丝路大赛》" />
        </view>
        <view class="list_item border_none">
          <view class="list_txt lh-98">宣传视频</view>
          <view class="">
            <uploadVideo class="upload_video"
              uploadIcon="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/upload_icon_video.png"
              :directory="'personInfo'" :accept="'video'" v-model:url="form.videoUrl" />
          </view>
        </view>
        <view class="list_item border_none">
          <view class="list_txt lh-98">企业宣传图片</view>
          <upload class="" :previewSize="180" :directory="'personInfo'" :maxCount="100" v-model:url="form.imgUrls" />
        </view>
        <view v-if="form.entArtistsList" class="editInfoUpload list_item border_none pr-0">
          <view class="list_txt lh-98">旗下艺人</view>
          <view class="flex_r flex_wrap">
            <view class="w_220 flex_c mr-16 mb-20" v-for="(item, idx) in form.entArtistsList" :key="idx">
              <upload  :previewSize="220" :directory="'editInfo'" v-model:url="item.artistsUrl" @onSuccess="addArtistsList" @on-delete="form.entArtistsList.splice(idx, 1)" />
              <input class="flex1 pr-0 input_txt" v-model="item.artistsName" placeholder-class='inputPlaceHolder'
                placeholder="请输入姓名" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="flex_center h_145 footer_fixed ">
    <view class="w_650 btns confirm" @click="onSubmit">保存</view>
  </view>
</template>
<script setup>
import uploadCropper from "@/components/common/upload-cropper"
import singlePicker from '@/components/common/singlePicker'
import regionPicker from '@/components/common/regionPicker'
import uploadVideo from "@/components/common/uploadVideo"
import upload from "@/components/common/upload"
// import mutiplePicker from '@/components/common/mutiplePicker'
import pickerMultipleSelect from "@/components/common/pickerMultipleSelect"
import { reactive, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

import { getOccDicName } from "@/api/ipElite"
import { findMyEntInfo, postCreateCompany } from '@/api/center'
import { getSearchDic, getAllCitArea } from '@/api/common'
import { deepClone } from '@/utils'
import storage from '@/utils/storage'
import wxValidate from "@/utils/wxValidate"
let form = reactive({
  id: '',
  headOssUrl: '',
  entName: '',
  occupationIds: '',
  province: '',
  city: '',
  area: '',
  address: '',
  interestLabel: '',//兴趣爱好
  staffName: "", 
  staffPost: "", 
  staffEmail: " ", 
  authType: "", 
  authImgUrl: "",
  remark: '',
  reprWorks: '',
  videoUrl: '',
  entArtistsList: [{ artistsName: '', artistsUrl: '' }],
})
const rules = {
  headOssUrl: { required: true },
  entName: { required: true }, // 名称
  occupationIds: { required: true },
  province: { required: true }, // 省
  address: { required: true },
  interestLabel: { required: true },
  staffName: { required: true },
  staffPost: { required: true },
  staffEmail: { required: true },
  authType: { required: true },
  authImgUrl: { required: true },
}
const messages = {
  headOssUrl: { required: '请上传企业LOGO' },
  entName: { required: '请输入您的姓名' }, // 名称
  occupationIds: { required: '请选择企业类型' }, // 职业
  province: { required: '请选择省份' }, // 省
  address: { required: '请选择详细地址' }, // 省
  interestLabel: { required: '请选择业务需求' }, // 职业
  staffName: { required: '请填写您的姓名' },
  staffPost: { required: '请填写您的职位' },
  staffEmail: { required: '请填写您的邮箱' },
  authType: { required: '请选择认证方式' },
  authImgUrl: { required: '请上传认证图片' },
}

let dicList = reactive({
  authType: [{ id: 1, dicName: '企业门头自拍照' }, { id: 2, dicName: '名片' }, { id: 3, dicName: '工作证' }],
  occupationIdsList: [],
  interestLabelList: [], // 兴趣爱好
  cityList: {},
})
let userInfo = uni.getStorageSync('info')
let onEdit = async (id) => {
  const { code, data } = await findMyEntInfo({ id })
  if (code === 200) {
    // entFlag: 0,//是否企业:0：个人；1：企业    个人职业类型
    Object.keys(form).forEach(key => {
      data[key] && (form[key] = data[key])
    })
    form.imgUrls = data.imgUrls ? data.imgUrls.join(',') : ''
    form.entArtistsList = data.entArtistsList.length ? data.entArtistsList : [{ artistsName: '', artistsUrl: '' }]
    // 获取兴趣爱好
    getDicList('interestLabelList', { dicType: 'sys_interest_dic' })
  }
}
let initValidate = (rules, messages) => {
  return new wxValidate(rules, messages)
}
onLoad(({ id }) => {
  id = 4
  id && onEdit(id)
  getDicList('interestLabelList', { dicType: 'sys_interest_dic' })
  getDicList('occupationIdsList', { dicType: 'business_type_dic' })
  // 获取城市列表
  getCityList()
})

// onMounted(() => {
// })
let onSubmit = async () => {
  let result = deepClone(form)
  if (result.entArtistsList.slice(0, -1).length) {
    form.entArtistsList.forEach((item, idx) => {
      rules[`entArtistsList[${idx}].artistsName`] = { required: true }
      rules[`entArtistsList[${idx}].artistsUrl`] = { required: true }
      messages[`entArtistsList[${idx}].artistsName`] = { required: '请填写艺人名称' }
      messages[`entArtistsList[${idx}].artistsUrl`] = { required: '请填写艺人图片' }
    })
  }
  
  let checktValidate = initValidate(rules, messages)
  if (!checktValidate.checkForm(form)) {
    uni.showToast({
      title: checktValidate.errorList[0].msg,
      icon: 'none'
    })
    return false
  }
  result.entArtistsList = result.entArtistsList.filter(({ artistsName }) => artistsName)
  result.imgUrls = result.imgUrls ? result.imgUrls.split(',') : ''
  const { code, data } = await postCreateCompany(result)
  if (code === 200) {
    uni.showToast({
      title: "提交成功",
      icon: 'none'
    })
    if (!result.id) {
      uni.navigateTo({
        url: '/pages/center/infomation/publishCompanySuccess'
      })
    } else {
      uni.navigateTo({
        url: '/pages/ipElite/companyInfomation'
      })
    }
  }
}
let getDicList = async (list, params) => {
  const { code, data } = await getSearchDic(params)
  if (code === 200) {
    dicList[list] = data
  }
}

let getCityList = async () => {
  const { code, data } = await getAllCitArea()
  if (code === 200) {
    let result = data.reduce((prev, next) => {
      if (prev[next.pid]) {
        prev[next.pid].push(next)
      } else {
        prev[next.pid] = [next]
      }
      return prev
    }, {})
    dicList.cityList = result
  }
}
let addArtistsList = () => {
  // let { artistsName, artistsUrl } = form.entArtistsList.slice(-1)[0]
  // if (!artistsName || !artistsUrl) {
  //   uni.showToast({
  //     title: '请完善成员信息后再添加',
  //     icon: 'none'
  //   })
  //   return false
  // }
  form.entArtistsList.push({ artistsName: '', artistsUrl: '' })
}
</script>
<style lang="scss" scoped>
.page {
  padding-bottom: calc(165rpx + env(safe-area-inset-bottom));
  // background-color: #fff;

  .container {
    // background: url(https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/info_company_bg.png) no-repeat left top/ 100% auto;
    // .border_15 {
    //   border-bottom: 15rpx solid #F4F7FC;
    // }
    .list_box {
      width: 750rpx;
      border-radius: 0;
    }
    .profile_photo {
      padding-top: 127rpx;
      padding-bottom: 19rpx;
      padding-bottom: 14rpx;
      background: #fff;
      display: flex;
      justify-content: center;

      // width: 200rpx;
      margin: 0 auto ;
    }
    .upload_icon {
      width: 152rpx;
      height: 152rpx;
    }
  }
}

::v-deep .editInfoUpload {
  .van-uploader {
    height: 330rpx !important;
    overflow: hidden;
    display: block;
  }

  .van-uploader__upload, .van-uploader__preview-image {
    // background-color: #fff;
    margin: 0;
    height: 330rpx !important;
  }
}
.input_txt {
  background: #F4F7FC;
  border-radius: 4rpx;
  height: 58rpx;
  line-height: 58rpx;
  margin-top: 19rpx;
  padding-left: 10rpx;
}


.w_650 {
  width: 650rpx;
}
</style>